// pages/articleDetail/articleDetail.js
var request = require('../../utils/request.js')
var audio = wx.getBackgroundAudioManager();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    indicatorDots: true,
    autoplay: false,
    interval: 5000,
    duration: 1000,
    articleDetail: {},
    danmuList: [
      {
        text: '花生最帅',
        color: '#ff0000',
        time: 12
      }
    ],
    videoCoverHidden: false,
    playing:false,
    audioCurTime:0,
    progressPercent:0,
    progressCircleLeft:0,
    progressWidth:520,
    audioCircleOrigionX:0,
    getAudioOriginFlag:false,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    this.getData(options.id)
  },

  getData: function (id) {
    var that = this
    request({
      url:'/getArticleDetail?id=' + id,
      success: function (res) {
        console.log(res)
        that.setData({
          articleDetail: res
        })
      }
    })
    console.log(this.data.articleDetail)
  },

  onVideoTap: function () {
    // console.log(id)
    console.log(11)
    this.setData({
      videoCoverHidden: true
    })
    var myVideo = wx.createVideoContext('myVideo');
    myVideo.play()
  },

  audioPlay(){
    audio.src = "http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46";
    audio.title = "来自单向街书店"
    this.listenAudioPlay()
    this.updataAudioData()
  },

  onAudioPlayTap: function () {
    var playing = this.data.playing
    if(playing) {
      audio.pause()
    }else {
      this.audioPlay()
        }
    this.setData({
      playing:!playing
    })
    
  },

  listenAudioPlay:function(){
    var that = this
    audio.onPause(function(){
      that.setData({
        playing:false
      })
    })

    audio.onStop(function(){
      that.setData({
        playing:false
      })
    })

    audio.onEnded(function(){
      that.setData({
        playing:false
      })
    })

    audio.onPlay(function(){
      that.setData({
        playing:true
      })
    })

    this.updataAudioData()

  },

  updataAudioData:function(){
    var that = this
    var audioDuration = this.data.articleDetail.audio.duration;
    audio.onTimeUpdate(function(){
      var audioCurTime = audio.currentTime.toFixed()
      var percent = audioCurTime/audioDuration;
      var progressPercent = percent * 100;
      var progressCircleLeft = percent * that.data.progressWidth
      that.setData({
        audioCurTime:audioCurTime,
        progressPercent:progressPercent,
        progressCircleLeft:progressCircleLeft
      })
    })
  },
  onAudioCircleStart(e){
    // console.log(e.touches[0].pageX)
    var audioCircleOrigionX = e.touches[0].pageX * this.getPhoneRadio()
    console.log(audioCircleOrigionX)

    if(!this.data.getAudioOriginFlag) {
      this.setData({
        audioCircleOrigionX:audioCircleOrigionX,
        getAudioOriginFlag:true
      })
    }
  },
  onAudioCircleMove(e){
    // console.log(e.touches[0].pageX)
    var audioCircleOrigionX = this.data.audioCircleOrigionX
    var audioCircleMoveX = e.touches[0].pageX * this.getPhoneRadio()
    var progressCircleLeft = audioCircleMoveX - audioCircleOrigionX
    if(progressCircleLeft <= 0) {
      progressCircleLeft = 0
    }else if(progressCircleLeft >= this.data.progressWidth ) {
      progressCircleLeft = this.data.progressWidth
    }
    var progressPercent = progressCircleLeft / this.data.progressWidth * 100
    var audioCurTime = (progressCircleLeft / this.data.progressWidth * this.data.articleDetail.audio.duration).toFixed()

    this.audioPlay()
    audio.seek(Number(audioCurTime))
    this.setData({
      progressCircleLeft:progressCircleLeft,
      progressPercent:progressPercent,
      audioCurTime:audioCurTime
    })
  },
  getPhoneRadio(){
    let radio = 0;
    wx.getSystemInfo({
      success: function(res) {
        var width = res.screenWidth
        radio = 750 / width
      }
    })
    return radio
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})